@import '~tracim_frontend_lib/src/css/Variable.styl'

.carousel
  &__main
    margin 0 30px
  &__thumbnail
    height 157px
    margin-top standardSpacing
    background-color lightGrey2
    & > .slick-list
      height 100%
    & .slick-current
      & .carousel__thumbnail__item__preview__content__image
        background-color #7d4e24
      & .carousel__thumbnail__item__preview__error
        color #7d4e24
    &__item__preview
      &__content
        height 125px
        margin standardSpacing
        display flex
        align-items center
        cursor pointer
        &__image
          margin 0 auto
          box-shadow 0 0 8px 4px rgba(0,0,0,0.2)
          border none
          &:hover
            box-shadow 0 0 16px 4px rgba(0,0,0,0.3)
      &__error
        margin auto
        font-size titleFontSize
  &__item__preview
    height 100%
    &__content
      height 100%
      display block
      &__image
        padding standardSpacing
        justify-content center
        align-items center
        display flex
        height 100%
        & img
          object-fit contain
          cursor pointer
          box-shadow 0 0 8px 2px rgba(0,0,0,0.2)
    &__error
      height 100%
      display flex
      align-items center
      &__message
        margin auto
      &__icon
        font-size titleFontSize
  &__arrow
    position absolute
    height 100%
    width 60px
    cursor pointer
    display block
    top 0
    z-index 1
    & i.fa
      position absolute
      top calc(50% - 20px)
      left 50%
      // INFO - SG - 2022-02-16 - forcing the scale to (1, 1)
      // as the prev/next arrows aren't reversed with react-slick when dir="rtl"
      transform translateX(-50%) scale(1, 1)
      font-size bigIconSize
    &:hover
      background-color secodaryButtonHover
      border-radius standardBorderRadius
    &.arrownext
      right -20px
    &.arrowprev
      left -20px

.gallery
  &-scrollView
    height 100%
    overflow-y auto
    & .pageContentGeneric
      padding pageSpacing 0
  &__action__button
    text-align center
    & button
      margin-inline-end standardSpacing
    &__lightbox
      &__openRawContent
        // INFO - GM - 2019-11-29 - Copy the style of lightbox button because it is a <a> tag
        margin 2px
        height 35px
        width 40px
        font-size standardFontSize
        border-radius 0.25rem
        color #929292
        background-color rgba(0, 0, 0, 0.5)
        &:hover
          color #FFFFFF
        & > i
          display flex
  &__delete__file__popup
    & .cardPopup__container
      width 400px
    &__body
      width 100%
      &__btn
        display flex
        justify-content flex-end
        & > .iconbutton
          margin-inline-start standardSpacing
  &__noContent
    text-align center
    font-size titleFontSize
  &__loader
    width 100%
    height 60vh
    display flex
    align-items center
    justify-content center
    &__icon
      font-size bigIconSize
  &__mouse__listener
    width 100vw
    height 100vh
    position fixed
    z-index 31
    top 0
    left 0

.rotate0
  transform rotate(0deg)
  transition none
.rotate90
  transform rotate(90deg)
  transition none
.rotate180
  transform rotate(180deg)
  transition none
.rotate270
  transform rotate(270deg)
  transition none

.ril__caption, .ril__toolbar
  background none

.ril
  &__toolbarRightSide
    width 100%
    padding-inline-end standardSpacing
    text-align end
    & button
      height 35px
      width 40px
      margin 2px
      border-radius 0.25rem
      background-color rgba(0, 0, 0, 0.5)
      font-size standardFontSize
      color #929292
      cursor pointer
      &:hover
        color #FFFFFF
  &__toolbarLeftSide
    display none

.slick-slide > div
  height 100%

// NOTE 2022-02-17 - SG - disable react-slick rtl handling as it is buggy.
[dir='rtl'] .slick-slide
  float left !important

.carousel__main .slick-track
  // INFO - GM - 2019-01-20 - 391px is the size of others elements which aren't responsive (header, app header, thumbnails...)
  height calc(100vh - 391px)

// MEDIAQUERIES

@media (max-width: max-xs)
  .gallery
    &__action__button
      & i
        margin 0
      & .iconbutton__text_with_icon
        display none
      &__lightbox__openRawContent
        height 30px
        width 35px
        padding 3px
  .ril__toolbarRightSide button
    height 30px
    width 35px
    padding 0
